<template>
  <bazi-section title="所选流年大运信息">
    <view class="liunian-containter">
      <view class="liunian-item title">
        <view class="liunian-title" v-for="(item,index) in arr1" :key="index">
          {{ item }}
        </view>
      </view>
      <view class="liunian-item">
        <template v-for="(item,index) in arr2">
          <view :key="index" :class="[index == 0 ? 'content-title' : 'liunian-content']">{{ item }}</view>
        </template>
      </view>
      <view class="liunian-item">
        <template v-for="(item,index) in arr3">
          <view v-if="index==0" class="content-title" :key="index">{{item}}</view>
          <view v-else class="liunian-content ganzhi-important" :key="index">
            <view :style="fiveElementInfo(item).color">{{item}}</view>
            <image v-if="item!=''" class="element-icon" :src="fiveElementInfo(item).img"></image>
          </view>
        </template>
      </view>
      <view class="liunian-item">
        <template v-for="(item,index) in arr4">
          <view v-if="index==0" class="content-title" :key="index">{{item}}</view>
          <view v-else class="liunian-content ganzhi-important" :key="index">
            <view :style="fiveElementInfo(item).color">{{item}}</view>
            <image v-if="item!=''" class="element-icon" :src="fiveElementInfo(item).img"></image>
          </view>
        </template>
      </view>
      <!-- 藏干 -->
      <view class="liunian-item">
        <template v-for="(item,index) in arr5">
          <view v-if="index==0" class="content-title" :key="index">{{item}}</view>
          <view v-else class="liunian-content ganzhi_content_canggan" :key="index">
            <view v-for="(e, i) in item" :style="fiveElementInfo(e).color" :key="i">{{e}}</view>
          </view>
        </template>
      </view>
      <!-- 藏干十神 -->
      <view class="liunian-item">
        <template v-for="(item,index) in arr6">
          <view v-if="index==0" class="content-title" :key="index">
            <view v-for="(m,n) in item" :key="n">{{ m }}</view>
          </view>
          <view v-else class="liunian-content ganzhi_content_cangganShishen" :key="index">
            <view v-for="(e, i) in item" :key="i">{{ e }}</view>
          </view>
        </template>
      </view>
      <view>
        <liuyishensha :result="baziResult" :dayun="selectedDayun" :liunian="selectedLiunian" :liuyue="selectedLiuyue" :liuri="selectedLiuri"></liuyishensha>
      </view>
    </view>
  </bazi-section>
</template>
<script>
  import baziSection from './section.vue'
  import liuyishensha from "./liuyishensha.vue"
  import wuxingColor from '@/utils/wuxing.js'
  import {
    EventBus
  } from '@/main.js'
  export default {
    components: {
      baziSection,
      liuyishensha
    },
    props: {
      result: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        baziResult: this.result,
        arr1: ["日期", "", "", "", ""],
        arr2: ["十神", "", "", "", ""],
        arr3: ["天干", "", "", "", ""],
        arr4: ["地支", "", "", "", ""],
        arr5: ["藏干", [], [], [], []],
        arr6: [["藏干","十神"], [], [], [], []],
        selectedDayun: {},
        selectedLiunian: {},
        selectedLiuyue: {},
        selectedLiuri: {}
      }
    },
    mounted() {
      EventBus.$on('dayun', param => {
        this.selectedDayun = param.dayunData;
        this.dayunData = param.dayunData;
        this.updateData([
          `${this.dayunData.startAge}-${this.dayunData.endAge}岁`,
          this.dayunData.shiShen[0],
          this.dayunData.ganZhi[0],
          this.dayunData.ganZhi[1],
          this.dayunData.cangGan.split(','),
          this.dayunData.cangGanShiShen
        ], 1)
      })
      EventBus.$on('liunian', param => {
        this.selectedLiunian = param.liunianData;
        this.liunianData = param.liunianData;
        this.updateData([
          this.liunianData.year+'年',
          this.liunianData.shiShen[0],
          this.liunianData.ganZhi[0],
          this.liunianData.ganZhi[1],
          this.liunianData.cangGan.split(','),
          this.liunianData.cangGanShiShen
        ], 2)
      })
      EventBus.$on('liuyue', param => {
        this.selectedLiuyue = param.liuyueData;
        this.liuyueData = param.liuyueData;
        this.updateData([
          this.liuyueData.monthInChinese+'月',
          this.liuyueData.shiShen[0],
          this.liuyueData.ganZhi[0],
          this.liuyueData.ganZhi[1],
          this.liuyueData.cangGan.split(','),
          this.liuyueData.cangGanShiShen
        ], 3)
      })
      EventBus.$on('liuri', param => {
        this.selectedLiuri = param.liuriData;
        this.liuriData = param.liuriData;
        this.updateData([
          this.liuriData.dayInChinese,
          this.liuriData.shiShen[0],
          this.liuriData.ganZhi[0],
          this.liuriData.ganZhi[1],
          this.liuriData.cangGan.split(','),
          this.liuriData.cangGanShiShen
        ], 4);
        // 选择流日导致农历月份跨月变更
        this.$nextTick(() => {
          this.$set(this.arr1, 3, this.liuriData.monthInChinese+'月')
          
        })
      })
    },
    beforeDestroy(){
      EventBus.$off("dayun")
      EventBus.$off("liunian")
      EventBus.$off("liuyue")
      EventBus.$off("liuri")
    },
    methods: {
      // 对应五行信息
      fiveElementInfo(str) {
        let {
          color,
          img
        } = wuxingColor.getGanzhiWuxingColorInfo(str);
        return {
          color: `color: ${color}`,
          img: `/static/images/bazi/fortune/${img}`,
        }
      },
      liuriText(date) {
        if (date) {
          let arr = date.split('-');
          return `${arr[1]}-${arr[2]}`
        }
        return ""
      },
      // 信息更新
      updateData(arr, index) {
        this.$set(this.arr1, index, arr[0])
        this.$set(this.arr2, index, arr[1])
        this.$set(this.arr3, index, arr[2])
        this.$set(this.arr4, index, arr[3])
        this.$set(this.arr5, index, arr[4])
        this.$set(this.arr6, index, arr[5])
      }
    }
  };
</script>

<style lang="scss" scoped>
  .section {
    width: 100%;
    height: 72rpx;
    color: white;
    background: #C5A680;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10rpx 46rpx;

    .section-title {
      padding-right: 22rpx;
    }
  }

  .ganzhi_content {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b240d;
    font-size: 26rpx;
    line-height: 48rpx;
    flex: 1 0;
  }

  .element-icon {
    width: 36rpx;
    height: 36rpx;
  }

  .liunian-containter {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #787878;
    padding: 28rpx;
  }
  .title {
    background-color: #F0F0F0;
  }
  .liunian-title{
    display: flex;
    justify-content: center;
    width: 25%;
    box-sizing: border-box;
  }
  .liunian-content{
    display: flex;
    justify-content: center;
    color: #4b240d;
    width: 25%;
    box-sizing: border-box;
    font-size: 24rpx;
    min-height: 48rpx;
    line-height: 48rpx;
  }
  .ganzhi_content_canggan {
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    line-height: 44rpx;
  }
  .ganzhi_content_cangganShishen {
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  }
  .content-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #787878;
    width: 25%;
    box-sizing: border-box;
    min-height: 48rpx;
  }
  .ganzhi-important {
    font-size: 32rpx;
    align-items: center;
  }

  .liunian-item {
    display: flex;
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
    padding: 4rpx 0;
  }
</style>